﻿<!DOCTYPE html>
<html>
    <head>
		<title>jQuery/core</title>
        <meta charset="utf-8">
		<style>
			.syntax { color: red;}
			.colorRed {color: red;}
			.colorGreen {color: green;}
			.colorBlue {color: blue;}
		</style>
        <script src="script/jquery-3.5.1.js"></script>
        <script>
		console.log( "jQuery version: " + $.fn.jquery );

        </script>
    </head>
    <body>
        <h1>jQuery/core部分展示</h1>		
		<table>
            <tr>
                <td class="syntax">jQuery()</td>
                <td>根据入参的情形, 有3种功能: 1.selector情形, 代表匹配到的一组DOM element; 2.html情形, 创建element;3.function情形, DOM loading完毕时执行该function.</td>
            </tr>
            <tr>
                <td class="syntax">jQuery.noConflict()</td>
                <td>用于避免name conflict. 取消"$"和"jQuery"全局变量对jQuery的引用. 返回jQuery. </td>
            </tr>
            <tr>
                <td class="syntax">jQuery.holdReady()</td>
                <td>deprecated. 入参true, 增加readyWait计数; false, 调用ready().</td>
            </tr>
            <tr>
                <td class="syntax">jQuery.ready</td>
                <td>Promised-like object. DOMContentLoad后jQuery.ready会resolved. 常用于jQuery.when($.ready).then(....)</td>
            </tr>
            <tr>
                <td class="syntax">jQuery.readyException()</td>
                <td>发生错误时的回调.</td>
            </tr>
            <tr>
                <td class="syntax">jQuery.sub()</td>
                <td>deprecated</td>
            </tr>
            <tr>
                <td class="syntax">jQuery.when()</td>
                <td>Return a resolved Promise.</td>
            </tr>
		</table>
    <hr/>
    <p>see <a href="https://api.jquery.com/jQuery/#jQuery1"> https://api.jquery.com/jQuery/#jQuery1</a></p>
    请打开console观察输出.
    
    <script>
        var foo={
            foo:"bar", 
            hello:"world",
            sayhello: function(){console.log("say hello.");}
            };
        var $foo = $(foo);
        console.log("foo.prop(foo):" + $foo.prop("foo"));   //bar
        console.log("$foo:");
        console.log($foo);
        $foo.triggerHandler("sayHello");
    </script>

    <hr/>
    <div id="undefinedColor">
        <p id="res1">待定颜色1</p>
        <p id="res2">待定颜色2</p>
        <p id="res3">待定颜色3</p>
    </div>
	<script>
        $("#undefinedColor > p:nth-child(2)").css("border", "1px solid red");   //jQuery(selector)
    </script>

    <hr/>
    <div id="res4"/>
    <script>
        $("<p class='colorRed'>红色文本</p>").appendTo("#res4");        //jQuery(html)生成dom element
    </script>

    <hr/>
    <div id="res5"/>
    <script>
        j = $.noConflict(false);        //false, 保留jQuery, 不保留$对jQuery的引用
        j("<p class='colorBlue'>蓝色文本</p>").appendTo("#res5");
    </script>

    <hr/>
    <button type="button" id="btn1" onclick="btn1Click()">resolve hello</button>
    <script>
        jQuery.when(jQuery.ready)       //等同于$(function{})
        .then(function(){
            alert("DOM content loaded.");
        });


        var helloProm= jQuery.Deferred();

        jQuery.when(helloProm)
        .then(resolveHello);            //helloProm resolve后触发resolveHello

        function btn1Click(){
            alert("Start to resolve hello");
            helloProm.resolve("world");
        }


        function resolveHello(p){
            alert("hello "+p);
        }
</script>
    </body>
</html>
